<template>
	<view class="time-container">
		<text class="text">操作计时</text>
		<view class="time-icon">
			<text class="time">{{ formattedTime }}</text>
		</view>
	</view>
</template>

<script setup>
import { computed, onMounted, onUnmounted } from 'vue'
import { 
  formattedTime, 
  startCountdown, 
  stopCountdown, 
  getCurrentPagePath 
} from '@/components/timeModule/countdown.js'

// 当前页面路径
const currentPagePath = getCurrentPagePath()

// 组件挂载时启动倒计时
onMounted(() => {
  startCountdown(currentPagePath)
})

// // 组件卸载时停止倒计时
// onUnmounted(() => {
//   stopCountdown()
// })
</script>

<style scoped lang="scss">
.time-container{
	display: flex;
	align-items: center;
	position: relative;
	width: 185rpx;
	height: 35rpx;
	top: 15rpx;
	left: 550rpx;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 50rpx;
	.text{
		position: absolute;
		left: 5%;
		z-index: 2;
		color: white;
		font-weight: 5rpx;
		text-align: center;
	}
	.time-icon{
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		right: 5%;
		border-radius: 50rpx;
		width: 55%;
		height: 80%;
		background-color: black;
		opacity: 1;
		z-index: 1;
		.time{
			color: #fff;
			z-index: 2;
		}
	}
}
</style>